@import '../../theme/style/variables.module.less';

.container {
    width: 100%;
    .properties(height, @mi-historical-height);
    position: absolute;
    .properties(top, @mi-header-height);
    left: 0;
    .flex(center, flex-start);
    .properties(padding-left, 16);
    .properties(padding-right, 16);
}

.btn,
.dropdown {
    .properties(width, 32);
    .properties(height, 32);
    .properties(min-width, 32);
    .circle();
    .flex();
    cursor: pointer;
    color: var(--mi-historical-routing-text);
    background-color: var(--mi-historical-routing-bg);
    .transition();
    
    &-disabled {
        cursor: not-allowed;

        :global {
            .anticon {
                cursor: not-allowed;
            }
        }
    }
}

.dropdown {
    .properties(margin-left, 16);
}

.list {
    width: 100%;
    .properties(margin-left, 16);
    .properties(margin-right, 16);
    .flex(center, flex-start);
    position: relative;
    overflow: hidden;
}

.items {
    .flex(center, flex-start);
    position: relative;
    .transition();
    
    .item {
        .properties(height, 32);
        .flex();
        .properties(padding-left, 16);
        .properties(padding-right, 24);
        .properties(margin-right);
        .radius(32);
        .ellipsis();
        .transition();
        cursor: pointer;
        position: relative;
        background-color: var(--mi-historical-routing-bg);
        color: var(--mi-historical-routing-text);

        &-name {
            .properties(margin-right);
            .properties(font-size, 14);
        }

        &:last-child {
            margin-right: 0;
        }
        
        &-active {
            .gradient-hint(var(--mi-historical-routing-item-bg-active-start), var(--mi-historical-routing-item-bg-active-hint), var(--mi-historical-routing-item-bg-active-stop));
            color: var(--mi-historical-routing-item-active-text);
        }

        &-mask {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: block;
            z-index: 10;
            .radius(32);
            overflow: hidden;
        }

        :global {
            .anticon {
                position: absolute;
                .properties(right, 10);
                .properties(width, 14);
                .properties(height, 14);
                top: 50%;
                transform: translateY(-50%);
                .flex();
                .properties(font-size, 12);
                z-index: 20;
            }
        }
    }
}

:export {
    --historical-routing-bg: var(--mi-background);
    --historical-routing-text: var(--mi-on-background);
    --historical-routing-item-active-text: var(--mi-on-primary);
    --historical-routing-item-bg-active-start: var(--mi-primary);
    --historical-routing-item-bg-active-hint: var(--mi-secondary);
    --historical-routing-item-bg-active-stop: var(--mi-tertiary);
}